<template>
  <div id="register">
    <van-form colon validate-first @failed="onFailed" @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' },{ validator: passwordValidator, message: '长度在6~18之间，只能包含字母、数字和下划线'}]"
      />
      <van-field name="gender" label="性别">
        <template #input>
          <van-radio-group v-model="gender" direction="horizontal">
            <van-radio name="0">男</van-radio>
            <van-radio name="1">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        readonly
        clickable
        name="birthday"
        :value="birthday"
        label="生日"
        placeholder="点击选择日期"
        @click="showBirthdayCalendar = true"
      />
      <van-calendar v-model="showBirthdayCalendar" @confirm="onBirthdayConfirm" />
      <van-field
        v-model="mobile"
        type="text"
        name="mobile"
        label="手机号"
        placeholder="手机号"
        :rules="[{ validator: mobileValidator,message: '请填写正确的手机号' }]"
      />
      <van-field
        v-model="email"
        name="email"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ validator: emailValidator,message: '请填写正确的邮箱' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          注册
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #register{
    margin-top: 40px;
  }
</style>

<script lang="ts">
// @ is an alias to /src
import { Form,Field,Button,Radio,RadioGroup,Calendar } from 'vant';
import { Component, Prop, Vue, Watch, Model } from 'vue-property-decorator';
import axios from '../api/axios.base';

Vue.use(Form).use(Field).use(Button).use(Calendar).use(Radio).use(RadioGroup);
@Component
export default class RegisterComponent extends Vue {
  private readonly username: string = '';
  private readonly password: string = '';
  private readonly mobile: string = '';
  private readonly email: string = '';
  private readonly gender: string = '0';
  private birthday: string = '';
  private showBirthdayCalendar: boolean = false;

  private passwordValidator(val: string): boolean{
    return /^\w{5,17}$/.test(val);
  }

  private mobileValidator(val: string): boolean{
    return /^\d{11}$/.test(val);
  }

  private emailValidator(val: string): boolean{
    return /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(val);
  }

  private onSubmit(values: any) {
    axios.post('/api/user',values)
    .then((res) => {
      console.log(res.data);
    });
  }

  private onFailed(errorInfo: any) {
    console.log('failed', errorInfo);
  }

  private onBirthdayConfirm(date: Date){
    this.birthday = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    this.showBirthdayCalendar = false;
  }
}
</script>
